import React from 'react';
import PropTypes from 'prop-types';
import Todo from './Todo';
const TodoList = ({
	todos,
	onToggle,
	onDelete
}) => (
	<ul>
		{todos.map(todo => (
			<Todo 
				key={todo.id}
				{...todo}
				onToggle={(e)=>onToggle(todo.id)}
				onDelete={(e)=>onDelete(todo.id)}
			/>
		))}
	</ul>
)
TodoList.propTypes = {
	todos: PropTypes.arrayOf(PropTypes.shape({
		id: PropTypes.number.isRequired,
		text: PropTypes.string.isRequired,
		completed: PropTypes.bool.isRequired
	}).isRequired).isRequired,
	onToggle: PropTypes.func.isRequired,
	onDelete: PropTypes.func.isRequired
}

export default TodoList